<template>
  <div class="addaddress">
    <app-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">添加地址</p>
    </app-header>
    <div class="addaddress-item">
      <div class="item-name">
        <div class="item-name__top">
          <p>联系人</p>
          <div class="item-name__inp border-line">
            <keep-alive>
              <input type="text" v-model="userInfo.name" placeholder="姓名">
            </keep-alive>
          </div>
        </div>
        <div class="item-radio">
          <co-radioGroup v-model='userInfo.sex'>
            <co-radio :value="1" label="先生"></co-radio>
            <co-radio :value="2" label="女士"></co-radio>
          </co-radioGroup>
        </div>
      </div>
      <div class="item-phone__top">
        <p>电话</p>
        <div class="item-phone__inp border-line">
          <input type="phone" v-model="userInfo.phone" placeholder="13018073006">
        </div>
      </div>
      <div class="item-address">
        <div class="item-address__left">
          地址
        </div>
        <div @click="$router.push({ name: 'SearchAddress' })" class="item-address__right">
          <p>
            {{$route.query.name}}
            <img src="../assets/下一步.png" alt="">
          </p>
          <p>{{$route.query.address}}</p>
        </div>
      </div>
      <div class="item-phone__top">
        <p>门牌号</p>
        <div class="item-phone__inp border-line">
          <input type="text" v-model="number" placeholder="10号楼5栋1301室">
          <img src="../assets/编辑.png" alt="">
        </div>
      </div>
      <div class="item-phone__top">
        <p>标签</p>
        <div class="item-radio">
          <co-radioGroup v-model='userInfo.tag_type'>
            <co-radio :value="2" label="家"></co-radio>
            <co-radio :value="3" label="学校"></co-radio>
            <co-radio :value="4" label="公司"></co-radio>
          </co-radioGroup>
        </div>
      </div>
    </div>
    <div @click="SaveAddress" class="btnAdd">确定</div>
  </div>
</template>

<script>
import AppHeader from './AppHeader.vue'
import coRadio from './simpleComponents/co-radio/co-radio'
import coRadioGroup from './simpleComponents/co-radio/co-radioGroup'
import { state } from '../store'
import {createToast} from './simpleComponents/co-toast'

export default {
  name: 'AddAddress',
  data () {
    return {
      number: '',
      userInfo: {
        // 地址
        address: this.$route.query.name,
        // 地址详情
        address_detail: this.$route.query.address,
        // 收货人姓名
        name: '',
        // 电话号码
        phone: '',
        // 标签
        tag: '谁',
        // 备注电话
        phone_bk: '13027100118',
        // 标签类型，2:家，3:学校，4:公司
        tag_type: '',
        // 性别， 1:男，2:女
        sex: ''
      }
    }
  },
  components: { AppHeader, coRadio, coRadioGroup },
  methods: {
    prev () {
      this.$router.go(-1)
    },
    SaveAddress () {
      if (this.userInfo.name === '') {
        createToast({
          message: '姓名不能为空',
          duration: 2000
        })
      } else if (this.userInfo.phone === '') {
        createToast({
          message: '联系方式不能为空',
          duration: 2000
        })
      } else {
        this.$http.SaveAddress({
          user_id: state.user_id,
          geohash: state.geohash,
          ...this.userInfo
        }).then(res => {
          console.log(res.data)
          if (res.data.status === 1) {
            this.$router.push({ name: 'Address' })
          } else {
            createToast({ message: res.data.message, duration: 2000 })
            console.log(this.name)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
    /* changeSex (e) {
      this.sex = e
    } */
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .addaddress{
    width: 100%;
    height: 177vw;
    .addaddress-item{
      width: 100%;
      height: 670px;
      background-color: #fff;
      .item-name{
        width: 92%;
        height: 192px;
        margin: 0px auto;
        border-bottom: 1px solid #ddd;
        .item-name__top{
          width: 100%;
          height: 92px;
          display: flex;
          align-items: center;
          p{
            width: 90px;
            font-size: 30px;
            font-weight: bold;
            color: #333;
          }
          .item-name__inp{
            width: 560px;
            height: 92px;
            display: flex;
            align-items: center;
            margin-left: 40px;
            input{
              font-size: 32px;
              color: #666;
              border: none;
              outline: none;
            }
          }
          .border-line{
            border-bottom: 1px solid #ddd;
          }
        }
        .item-radio{
          width: 100%;
          height: 100px;
          margin-left: 130px;
          display: flex;
          align-items: center;
        }
      }
      .item-phone__top{
        width: 92%;
        display: flex;
        align-items: center;
        margin: 0px auto;
        border-bottom: 1px solid #ddd;
        p{
          width: 90px;
          font-size: 30px;
          font-weight: bold;
          color: #333;
        }
        .item-phone__inp{
          width: 560px;
          height: 92px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 40px;
          input{
            font-size: 32px;
            color: #666;
            border: none;
            outline: none;
          }
          img{
            width: 36px;
          }
        }
        .item-radio{
          padding: 10px 0px;
        }
      }
      .item-address{
        width: 92%;
        /* height: 150px; */
        display: flex;
        align-items: center;
        margin: 0px auto;
        .item-address__left{
          width: 90px;
          height: 92px;
          line-height: 92px;
          font-size: 30px;
          font-weight: bold;
          color: #333;
        }
        .item-address__right{
          width: 560px;
          margin: 34px 0px 0px 40px;
          padding-bottom: 28px;
          box-sizing: border-box;
          border-bottom: 1px solid #ddd;
          p:nth-child(1){
            font-size: 28px;
            color: #666;
            img{
              width: 40px;
              float: right;
            }
          }
          p:nth-child(2){
            margin-top: 28px;
            font-size: 22px;
            color: #666;
          }
        }
      }
    }
    .btnAdd{
      width: 92%;
      font-size: 35px;
      padding: 25px 305px;
      box-sizing: border-box;
      color: #fff;
      margin: 40px auto 0px;
      background-color: #03d762;
      border-radius: 10px;
      font-weight: bold;
    }
  }
</style>
